<template>
	<view class="container">
		<input 
			confirm-type="search"
			placeholder="请输入小区,写字楼等地址" 
			class="input"
			v-model="value"
			@input="onInput"
			@confirm="onConfirm"
		/>
		<image class="searchIcon" src="/static/icon/search.png" />
		<image v-if="value" @tap="onTapClear" class="closeIcon" src="/static/icon/icon-clear.png" />
		<view v-if="showCancel" @tap="onTapCancel" class="cancelBtn">
			<text class="cancelBtnText">取消</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				showCancel: false
			}
		},
		methods: {
			onInput(e) {
				this.showCancel = true
				this.$emit('input', e)
			},
			onConfirm(e) {
				this.$emit('confirm', e)
			},
			onTapClear() {
				this.value = ''
				this.$emit('clear')
			},
			onTapCancel() {
				this.$emit('cancel')
			}
		}
	}
</script>

<style scoped>
	.container {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		width: 100%;
		/* #endif */
		/* #ifdef H5 || MP-WEIXIN */
		flex: 1;
		/* #endif */
		flex-direction: row;
		background-color: #F6F6F6;
		border-radius: 25rpx;
		padding-left: 56rpx;
		padding-right: 156rpx;
		position: relative;
	}
	.input {
		flex: 1;
		font-size: 26rpx;
		color: #838383;
		height: 56rpx;
		/* border-width: 1rpx;
		border-color: #007AFF;
		border-style: solid; */
	}
	.searchIcon {
		position: absolute;
		/* top: 10rpx; */
		top: 28rpx;
		transform: translateY(-18rpx);
		left: 12rpx;
		width: 36rpx;
		height: 36rpx;
	}
	.closeIcon {
		position: absolute;
		/* top: 10rpx; */
		top: 28rpx;
		transform: translateY(-18rpx);
		right: 110rpx;
		width: 36rpx;
		height: 36rpx;
	}
	.cancelBtn {
		/* #ifdef H5 || MP-WEIXIN */
		display: flex;
		/* #endif */
		height: 46rpx;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 28rpx;
		transform: translateY(-23rpx);
		right: 13rpx;
		background-color: #F43F26;
		padding-left: 16rpx;
		padding-right: 16rpx;
		border-radius: 25rpx;
	}
	.cancelBtnText {
		text-align: center;
		font-size: 26rpx;
		color: #FFFFFF;
	}
</style>
